<html>
<head>
<script type="text/javascript" src="../ColorJizz.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
  function drawCircle(col, points, r, px, py) {
     var range = col.equal(points, true);
     var TO_RADIANS = Math.PI/180;
     for (var i=0; i < points; i++) {
        (function (){
        var ii = i;
        var ang = ii*(360/points);
        var x = Math.round(r*Math.cos(ang*TO_RADIANS))+px;
        var y = Math.round(r*Math.sin(ang*TO_RADIANS))+py;
        $("<div />").css({
          'position' : 'absolute',
          'top' : y,
          'left' : x,
          'width' : 15,
          'height' : 15,
          'z-index': 2,
          'cursor' : 'pointer',
          'background-color' : "#"+range[ii].toHex()
        }).mouseover(function (){
           drawSweetSpots(range[ii], r*2);
        }).appendTo("body");
        })();
     }
  }
  function drawSweetSpots(color){
    $("div.sweetspot").remove();
    var colors = color.sweetspot(true);
    for (var i=0; i<colors.length; i++){
      $("<div />").addClass("sweetspot").css({
        'width' : 60,
        'height' : 60,
        'left' : (60*i)+128,
        'top' : 270,
         'z-index': 1,
        'position' : 'absolute',
        'background-color' : '#'+colors[i].toHex()
      }).appendTo("body");
    }
  }
  $(function (){
  	var r = new Hex(0xFF0000);
   drawCircle(r.brightness(-60), 360, 300, 300, 300);
   drawCircle(r.brightness(-40), 360, 285, 300, 300);
   drawCircle(r.brightness(-20), 360, 270, 300, 300);
   drawCircle(r.brightness(0), 360, 255, 300, 300);
   drawCircle(r.brightness(20), 360, 240, 300, 300);
   drawCircle(r.brightness(40), 360, 225, 300, 300);
   drawCircle(r.brightness(60), 360, 210, 300, 300);
   drawCircle(r.brightness(80), 360, 195, 300, 300);
  });
</script>
</head>
<body>

</body>
</html>